<template>
    <div class="app-container">
        <el-row :gutter="20">
            <el-col
                v-for="(item,index) in projectCloudList"
                :key="index"
                :span="6"
                :xs="12"
                style="margin-top: 10px"
            >
                <el-card :body-style="{ padding: '0px' }">
                    <img
                        :src="item.image"
                        class="image"
                        style="width:100%"
                    />
                    <div style="padding: 14px;display: flex;justify-content: space-between">
                        <el-button type="text" @click="previewLook(item,index)">预览</el-button>
                        <el-button type="text" @click="setHomePage(item.index)">设置</el-button>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <el-dialog title="预览" :visible.sync="open" fullscreen  :close-on-click-modal ="false">
           <div style="display: flex;justify-content: flex-end">
               <el-button type="primary" @click="setHomePage(componentName)">设置</el-button>
           </div>
            <component :is="currentComponent[this.previewIndex]"></component>
        </el-dialog>
    </div>
</template>

<script>
import controlLoop from '@/views/equipment/riceHuskingMachine/index.vue'
import equipmentSimple from '@/views/equipment/simple'
import home from '@/views/home/index.vue'
import monitor from '@/views/module/fertilizer/monitor/index.vue'
import { setIndex } from '@/api/home/homeData'
export default {
    name: 'index',
    components: {
        controlLoop,
        equipmentSimple,
        home,
        monitor
    },
    data() {
        return {
            currentComponent:['controlLoop','equipmentSimple','home','monitor'],
            projectCloudList:[
                { name: '回路控制', image:require('@/assets/images/control.jpg'),index:'controlLoop'},
                { name: '简单信息点', image: require('@/assets/images/simpleInfo.jpg'),index:'equipmentSimple' },
                { name: '具体信息', image: require('@/assets/images/specificInfo.jpg'),index:'home'},
                { name: '模块监控', image: require('@/assets/images/fertilizerInfo.jpg'),index:'monitor'},
            ],
            open:false,
            previewIndex:null,
            componentName:''
        }
    },
    methods:{
        previewLook(item,index){
            this.open = true
            this.previewIndex = index
            this.componentName = item.index
        },
        setHomePage(index){
            this.open =false
            let obj ={
                index
            }
            setIndex(obj).then(res=>{
                this.$modal.msgSuccess('设置成功')
                localStorage.setItem('defaultIndex',index)
                this.$router.push('/index')
            })
        },
    }
}
</script>

<style scoped>

</style>
